<template>
	<div class="appDetails">
		<Card>
			<div class="title">
				详情
			</div>
			<div class="form">
				<label>名称：</label>
				<span>{{name}}</span>
			</div>
			<div class="form">
				<label>命名空间</label>
				<span>{{nameSpace}}</span>
			</div>
			<div class="form">
				<label>标签：</label>
				<span>
					<div v-for="(item, index) in label" :key="index">
						{{item}}
					</div>
				</span>
			</div>
			<div class="form">
				<label>创建时间：</label>
				<span>{{date}}</span>
			</div>
			<div class="form">
				<label>选择器：</label>
				<span>
					<div v-for="(item, index) in select" :key="index">
						{{item}}
					</div>
				</span>
			</div>
			<div class="form">
				<label>镜像：</label>
				<span>{{image}}</span>
			</div>
		</Card>
		<!-- 容器组 -->
		<Card class="myCard">
			<div class="title">
				容器组
			</div>
			<Table :columns="columns" :data="tableData"></Table>
		</Card>
		<!-- 服务 -->
		<Card class="myCard">
			<div class="title">
				服务
			</div>
			<Table :columns="columns1" :data="tableData1"></Table>
		</Card>
		<Modal v-model="logModal" title="日志" width="1000" footer-hide>
			<div class="app-log">
				<p>{{log}}</p>
			</div>
		</Modal>
	</div>
</template>

<script>
	import Util from '@/utils/index'
	export default {
		data () {
			return {
				// 名称
				name: '',
				// 命名空间
				nameSpace: '',
				// 标签
				label: '',
				// 注释
				// notes: '',
				// 时间
				date: '',
				// 选择器
				select: '',
				// 镜像
				image: '',
				// label集合
				labelList: [],
				// 容器集合
				selectList: [],
				// 日志框
				logModal: false,
				// 日志
				log: '',
				columns: [
					{
						title: '应用名称',
						key: 'metadata',
						render: (h, params) => {
							return h('span', params.row.metadata.name)
						}
					},
					{
						title: '应用分组',
						key: 'metadata',
						render: (h, params) => {
							return h('span', params.row.metadata.namespace)
						}
					},
					{
						title: '节点',
						key: 'spec',
						render: (h, params) => {
							return h('div', params.row.spec.nodeName)
						}
					},
					{
						title: '启动时间',
						key: 'metadata',
						render: (h, params) => {
							return h('span', Util.fommotDate(params.row.metadata.creationTimestamp))
						}
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.$router.push({
												name: 'podDetails'
											})
											let index = params.row
											sessionStorage.nameSpace = index.metadata.namespace
											sessionStorage.name = index.metadata.name
										}
									}
								}, '查看详情'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									on: {
										click: () => {
											let myRow = params.row.metadata
											this.logModal = true
											this.$api.get(0, '/kuber/v2/k8s/metrics/log?nameSpace=' + myRow.namespace + '&name=' + myRow.name, {}, r => {
												if (r.data.code === 0) {
													this.log = r.data.data
												}
											})
										}
									}
								}, '查看日志')
							])
						}
					}
				],
				tableData: [],
				columns1: [
					{
						title: '应用名称',
						key: 'metadata',
						width: '200px',
						render: (h, params) => {
							return h('span', params.row.metadata.name)
						}
					},
					{
						title: '应用分组',
						key: 'metadata',
						width: '120px',
						render: (h, params) => {
							return h('span', params.row.metadata.namespace)
						}
					},
					{
						title: '标签',
						key: 'metadata',
						render: (h, params) => {
							let str = ''
							for (var item in params.row.metadata.labels) {
								str += item + ':' + params.row.metadata.labels[item] + '\n'
							}
							return h('div', str)
						}
					},
					{
						title: '启动时间',
						key: 'metadata',
						width: '200px',
						render: (h, params) => {
							var date1 = new Date(params.row.metadata.creationTimestamp).toString().replace(/-/g, '/')
							var date2 = new Date(+new Date(date1) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
							return h('span', date2)
						}
					},
					{
						title: '集群IP',
						key: 'spec',
						render: (h, params) => {
							return h('span', params.row.spec.clusterIP)
						}
					},
					{
						title: '内部端点',
						key: 'spec',
						render: (h, params) => {
							if (params.row.metadata.namespace === 'default') {
								return h('span', params.row.metadata.name + ':' + params.row.spec.ports[0].port + ' ' + params.row.spec.ports[0].protocol)
							} else {
								return h('span', params.row.metadata.name + '.' + params.row.metadata.namespace + ':' + params.row.spec.ports[0].port + ' ' + params.row.spec.ports[0].protocol)
							}
						}
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.$router.push({
												name: 'appServerDetails'
											})
											let index = params.row
											sessionStorage.nameSpace = index.metadata.namespace
											sessionStorage.name = index.metadata.name
										}
									}
								}, '查看详情')
							])
						}
					}
				],
				tableData1: []
			}
		},
		methods: {
			getDetails () {
				this.$api.get(0, '/kuber/v2/k8s/apps?type=ReplicaSet' + '&nameSpace=' + sessionStorage.nameSpace + '&name=' + sessionStorage.name, {}, r => {
					if (r.data.code === 0) {
						let myData = r.data.data
						// 名称
						this.name = myData.metadata.name
						// 命名空间
						this.nameSpace = myData.metadata.namespace
						this.label = []
						for (let key in myData.metadata.labels) {
							this.label.push(key + ':' + myData.metadata.labels[key])
						}
						// 注释
						// this.notes = myData.metadata.annotations
						// 时间
						this.date = Util.fommotDate(myData.metadata.creationTimestamp)
						// 选择器
						this.select = []
						for (let key in myData.spec.selector.matchLabels) {
							this.select.push(key + ':' + myData.spec.selector.matchLabels[key])
						}
						// 镜像
						this.image = myData.spec.template.spec.containers[0].image
						// 获取标签组
						for (let item in myData.metadata.labels) {
							this.labelList.push({'name': item, 'value': myData.metadata.labels[item]})
						}
						// 获取容器组
						for (let item in myData.spec.selector.matchLabels) {
							this.selectList.push({'name': item, 'value': myData.metadata.labels[item]})
						}
						this.getpodList()
						this.getServerListBySelect()
					}
				})
			},
			getpodList () {
				this.$api.get(0, '/kuber/v2/k8s/apps?type=Pod&nameSpace=' + this.nameSpace + '&labelvalue=' + this.labelList[0].value + '&labelkey=' + this.labelList[0].name, {}, r => {
					if (r.data.code === 0) {
						this.tableData = r.data.data.items
					}
				})
			},
			// getServerListByLabel () {
			// 	this.$api.get(0, '/kuber/v2/k8s/apps?type=Service' + '&nameSpace=' + this.nameSpace + '&labelvalue=' + this.labelList[0].value + '&labelkey=' + this.labelList[0].name, {}, r => {
			// 		if (r.data.code === 0) {
			// 			if (r.data.data.items.length === 0) {
			// 				this.getServerListBySelect()
			// 			} else {
			// 				this.tableData1 = r.data.data.items
			// 			}
			// 		}
			// 	})
			// },
			getServerListBySelect () {
				this.$api.get(0, '/kuber/v2/k8s/apps?type=Service' + '&nameSpace=' + this.nameSpace + '&selectorvalue=' + this.selectList[0].value + '&selectorkey=' + this.selectList[0].name, {}, d => {
					if (d.data.code === 0) {
						this.tableData1 = d.data.data.items
					}
				})
			},
			// 跳往容器
			toPod (index) {
				let myList = []
				for (var item in index.metadata.labels) {
					myList.push({'name': item, 'value': index.metadata.labels[item]})
				}
				sessionStorage.nameSpace = index.metadata.namespace
				sessionStorage.labelkey = myList[0].name
				sessionStorage.labelvalue = myList[0].value
				this.$router.push({
					name: 'pod'
				})
			}
		},
		mounted () {
			this.getDetails()
		}
	}
</script>
